<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>工时查看</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/my-style.css">
    <style>        /* 防止下拉框的下拉列表被隐藏---必须设置--- */
    .layui-table-cell {
        overflow: visible !important;
    }

    /* 设置下拉框的高度与表格单元相同 */
    .layui-input, .layui-select, .layui-textarea {
        height: 30px !important;
    }
    .layui-table-tool-self{
        display: none;
    }
    table{
        table-layout:fixed;
    }
    td{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    </style>
</head>
<body>
<div class="kit-doc">
    <!--表格搜索框组-->
    <div class="layui-form-item layui-formgroup layui-tab-card">
        <div class="layui-inline">
            <form class="layui-form " action="">
                <input type="hidden" id="monday">
                <input type="hidden" id="sunday">
                <label class="layui-form-label">项目：</label>
                <div class="layui-input-inline">
                    <select name="interest" id="searchProject" lay-verify="required" lay-search="">
                        <option value=""></option>
                        <option value="" th:each="project : ${projectList}" th:value="${project.getId()}" th:text="${project.getProjectName()}"></option>
                    </select>
                </div>
            </form>
        </div>
        <!-- 时间 -->
        <div class="layui-inline">
            <label class="layui-form-label">日期：</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="test6" placeholder=" 时间段 " type="text">
            </div>
        </div>

        <!-- 按钮 -->
        <button class="layui-btn layui-btn-sm" id="searchBtn">搜索</button>
        <button class="layui-btn layui-btn-sm" id="exportBtn">导出</button>
    </div>

    <div class="layui-card layui-card-body gs-box">
        <div id="tb" style="height:auto"> </div>
        <table class="layui-table xuhao-table " id="table-context" lay-filter="test">
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="batchDel">批量删除</button>
    </div>
</script>

<!--类型id和名字对应的select-->
<select id="projectType" lay-verify="required" lay-search="" style="display:none">
    <option value=""></option>
    <option value="" th:each="type : ${typeList}" th:value="${type.getId()}" th:text="${type.getTypeName()}"></option>
</select>

<!--项目id转名字-->
<script type="text/html" id="projectTpl">
    {{ projectToName(d.projectId) }}
</script>

<!--类型id转名字-->
<script type="text/html" id="typeTpl">
    {{ typeToName(d.projectTypeId) }}
</script>

<script src="/js/jquery.min.js"></script>
<script src="/plugins/layui/layui.js"></script>
<script src="/js/workhour.js"></script>
<script>
    var projectToName = function (projectId) {
        return layui.$("#searchProject option[value=" + projectId + "]").text();
    };

    var typeToName = function (typeId) {
        return layui.$("#projectType option[value=" + typeId + "]").text();
    };

</script>
<script >
    var now = new Date();

    // 获取周一和周末
    var start = getTime(0, now);
    $("#monday").val(start);
    var end = getTime(-6, now);
    $("#end").val(end);

    layui.use(['table', 'jquery', 'form'], function () {
// 保存上次查询的数据
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var projectTable = table.render({
            elem: '#table-context'
            , url: '/workhours/admin/view'
            , toolbar: '#toolbarDemo'
            , height: 'full-200'
            , page: true
            , limit: 10
            , limits: [10, 20, 30]
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {
                        field: 'projectId',
                        title: '项目名称',
                        templet: '#projectTpl',
                        align: 'center'
                    }, //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    {
                        field: 'projectTypeId',
                        title: '项目类型',
                        templet: '#typeTpl',
                        align: 'center'
                    },
                    {
                        field: 'username',
                        title: '用户名',
                        align: 'center'
                    },
                    {
                        field: 'remark',
                        title: '任务信息',
                        width: '20%',
                        align: 'center'
                    },
                    {
                        field: 'workDate',
                        title: '工作日期'
                    },
                    {
                        field: 'mon',
                        title: '周一',
                        width: '5%',
                    },
                    {
                        field: 'tues',
                        title: '周二',
                        width: '5%',
                    },
                    {
                        field: 'wed',
                        title: '周三',
                        width: '5%',
                    },
                    {
                        field: 'thur',
                        title: '周四',
                        width: '5%',
                    },
                    {
                        field: 'fri',
                        title: '周五',
                        width: '5%',
                    },
                    {
                        field: 'sat',
                        title: '周六',
                        width: '5%',
                    },
                    {
                        field: 'sun',
                        title: '周日',
                        width: '5%',
                    },
                    {
                        title: '操作',
                        fixed: 'right',
                        align: 'center',
                        width: '8%',
                        toolbar: '#barDemo'
                    }
                ]
            ]
            , done: function (res, curr, count) {
            }
        });

// 保存是否被编辑
        var isEdit = false;

        /**
         * 下拉选择项目名称
         */
        form.on('select(projectSelect)', function (obj) {
// layer.msg("data=" + obj.elem.getAttribute('name') + '：' + obj.value + ' ' + obj.elem);
            var index = $(obj.elem).parent().parent().parent().index();
            var tableData = table.cache["table-context"];
            tableData[index].projectId = obj.value;
            isEdit = true;
        });

        form.on('select(typeSelect)', function (obj) {
            // layer.msg("data=" + obj.elem.getAttribute('name') + '：' + obj.value + ' ' + obj.elem);
            var index = $(obj.elem).parent().parent().parent().index();
            var tableData = table.cache["table-context"];
            tableData[index].projectTypeId = obj.value;
            isEdit = true;
        });


        /**
         * 搜索
         */
        $("#searchBtn").click(function () {
            refresh();
        });

        function refresh(){
            var searchProjectContext = $("#searchProject").val();
            var start = $("#test6").val().split(' - ')[0];
            var end = $("#test6").val().split(' - ')[1];

            projectTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    projectId: searchProjectContext,
                    startDate: start,
                    endDate: end
                }
            });
        }


        // 导出
        $("#exportBtn").click(function () {
            var searchProjectContext = $("#searchProject").val();
            var start = $("#test6").val().split(' - ')[0];
            var end = $("#test6").val().split(' - ')[1];
            window.location.href = "/workhours/admin/excel?" +
                "projectId=" + searchProjectContext +
                "&startDate=" + start +
                "&endDate=" + end;
        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                idList = [];
                domIdList=[];
                switch (obj.event) {
                    case 'batchDel':
                        var data = checkStatus.data;
                        for (var i = 0; i < data.length; i++) {
                            console.log(data[i])
                            idList.push(data[i].id);
                            domIdList.push(data[i].LAY_TABLE_INDEX)
                        }
                        //没有选中任何一行
                        if (idList.length == 0) {
                            layui.layer.msg('请选择要删除行');
                            return;
                        }
                        layui.layer.confirm('确定删除当前行吗？', function (index) {
                            layui.layer.close(index);
                            layer.msg('删除中...', {icon: 16, shade: 0.3, time: 5000});
                            layui.$.ajax({
                                type: 'DELETE',
                                url: "/workhours/admin/batch/del",
                                contentType: "application/json",
                                dataType: 'json',
                                data: JSON.stringify(idList),
                                success: function (res) {
                                    layer.closeAll();
                                    if (res.code == 0) {
                                        refresh();
                                        layer.msg("删除成功");

                                    } else {
                                        layer.msg("删除失败" + data.msg);
                                    }
                                }
                            });
                        });
                        break;
                }

            }
        );

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    // console.log("当前行的数据为：" + data.id);
                    layer.close(index);
//向服务端发送删除指令
                    layui.$.ajax({
                        type: 'DELETE',
                        url: "/workhours/admin/del/" + data.id,
                        success: function (res) {
                            layer.closeAll();
                            if (res.code == 0) {
                                refresh();
                                layer.msg("删除成功");
                            } else {
                                layer.msg("删除失败" + res.msg);
                            }
                        }
                    });
                });
            }
        });

        //监听单元格编辑
        table.on('edit(test)', function (obj) {

            isEdit = true;

        });

        // 添加数据
        $("#addBtn").click(function () {
            var newRow = {
                id: null,
                projectId: null,
                projectType: null,
                userId: null,
                workDate: null,
                workHours: null,
                delFlag: null,
                fri: null,
                mon: null,
                remark: null,
                stat: null,
                sun: null,
                thur: null,
                tues: null,
                wed: null
            };
            var oldData = table.cache["table-context"];
            oldData.push(newRow);
            projectTable.reload({
                url: "",
                data: oldData
            });
        });

    })
    ;
</script>

</body>
</html>